<!-- @FileDescription: 公共-多语言切换组件 -->
<template>
    <div style="padding-bottom:20px;">
        <div style="min-height:560px;max-height:640px;overflow-y:scroll;overflow-x: hidden;"  v-loading="loadingunit">
            <div style="display:flex;flex-wrap:wrap;flex-direction: row;padding:0 20px;font-size:13px;color:#000;font-weight: 600;"> 
                <div v-for="(item, indexs) in menjinheader" :key="indexs" style="width:50%;padding:0 2%;height:36px;line-height:36px;display: flex; flex-direction: row;flex-wrap: nowrap;justify-content: space-between;">
                    <div style="width:250px;">{{ item.name }}</div>
                    <div style="width:140px;text-align: center;">{{ item.label }}</div>
                    <div style="width:150px;text-align: center">
                        {{ item.operate }}
                    </div>
                </div>
            </div>
            <div style="display:flex;flex-wrap:wrap;flex-direction: row;padding:0 20px;font-size:12px;">
                <div v-for="(item, indexs) in menjinData" :key="indexs" :style="item.isauth?'color:#f16643;':'color:#666;' "
                style="width:50%;padding:0 2%;line-height:20px;padding:5px 0;display: flex; flex-direction: row;flex-wrap: nowrap;justify-content: space-between;">
                    <div style="width:250px;">{{ item.menjinzumingcheng }}</div>
                    <div style="width:140px;text-align: center">
                        <el-date-picker style="width:150px;border:none;" :style="item.isauth?'color:#f16643;':'color:#666;' "
                                v-model="item.auth_time"  size="mini"
                                type="date" 
                                placeholder="授权结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" 
                                >
                        </el-date-picker>
                    </div>
                    <div style="width:150px;text-align: center">
                        <el-button type="text" size="small" v-if="item.isauth" style="color:#f16643;" @click="goDroopSubmit(item,1)">取消授权</el-button>
                        <el-button type="text" size="small" v-else @click="goDroopSubmit(item,2)">授权门禁</el-button>
                    </div>
                </div>
                
            </div>
                <!-- <el-table height="600" :data="menjinData"  style="width: 100%">
                    <el-table-column prop="menjinzumingcheng" label="门禁名称" min-width="180"></el-table-column>
                    <el-table-column label="授权结束日期" min-width="180" align="center">
                        <template slot-scope="scope">
                            <el-date-picker style="width:180px;border:none;" 
                                v-model="scope.row.auth_time"  size="mini"
                                type="date" 
                                placeholder="授权结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" 
                                >
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="scope.row.isauth" style="color:#f16643;">取消授权</el-button>
                            <el-button type="text" size="small" v-else>授权门禁</el-button>
                        </template>
                    </el-table-column>
                </el-table> -->
                <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkeddata" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="(item, indexs) in menjinData" :label="item.id" :key="indexs">{{item.menjinzumingcheng}}</el-checkbox>
                </el-checkbox-group> -->
            </div>
            <!-- <div style="display:flex;vertical-align: middle;width:480px;padding:10px 20px;">
                <div style="display: inline-block;width:140px;min-height:40px;line-height: 40px;text-align: right;">
                    授权结束日期：
                </div>
                <div style="display:inline-block;width:400px;height:40px;line-height: 40px;"  class="menjiselectinput">
                    <el-date-picker style="width:300px;"
                        v-model="authend_time"  size="small"
                        type="date" 
                        placeholder="授权结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" 
                        >
                    </el-date-picker>
                </div>
            </div> -->
        
        <!-- <div style="padding:20px 20px 40px 160px;">
            <el-button type="primary" @click="goDroopSubmit">确认授权门禁</el-button>
            <el-button @click="goClose">取消</el-button>
        </div> -->
    </div>
  </template>
  
  <script>
  export default {
    props: {
        menjinData: {
            type: Array,
            default: () => []
        },
        selectmenji: {
            type: Array,
            default: () => {
                return []
            }
        },
        loadingunit: {
            type: Boolean,
            default: false
        }
    },
    
    data() {
      return {
        authend_group_sn:[],
        authend_time:'',
        menjinheader:[
            {name: '门禁名称', label:'授权结束日期', operate:'操作'},
            {name: '门禁名称', label:'授权结束日期', operate:'操作'},

        ]
     
      }
    },
    mounted() {
        this.authend_group_sn = [];
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1); // 月份从0开始，需要加1
        const day = now.getDate() > 9 ? now.getDate() : '0' + now.getDate();
        this.authend_time = year + 10 + '-' + month + '-' + day;
    },
    methods: {
      
      goClose(){
        this.$emit("goMenjinFn", 1)
      },
      goDroopSubmit(item, index){
        let compareData = this.selectmenji;
        if(this.selectmenji.includes(item.id)){
           compareData.splice(compareData.indexOf(item.id), 1)
        }else{
           compareData.push(item.id)
        }
        let selectobj = { time: item.auth_time, ids: compareData }
        this.$emit("goMenjinFn", selectobj, index)
         
      },
    }
  }
  </script>
  <style scoped>
  .icondiqiu {
    font-size: 20px;
    color: #fff;
  }
  /deep/ .el-table--medium .el-table__cell{
     padding: 0;
  }
  /deep/ .el-table .cell{
    line-height:20px;
    font-size:12px;
  }
  /deep/ .el-button--small{
     padding:2px 12px;
  }
  /deep/ .el-table tr{
     height:36px;
  }
  </style>
  